<template>
  <div id="app">
    <router-view />
    <!-- <button @click="currentKey = 'xxxx'">update</button>

    <button
        v-for="tab in tabs"
        v-bind:key="tab"
        v-bind:class="['tab-button', { active: currentTab === tab }]"
        v-on:click="handleC(tab)">
        {{ tab }}
    </button>

    <keep-alive :include="['home', 'posts']">
      <component :key="currentKeyComponent"
        v-bind:is="currentTabComponent" class="tab"></component>
    </keep-alive> -->

  </div>
</template>

<script>
// import home from '@/vendor/home.vue'
// import posts from '@/vendor/posts.vue'
// import archive from '@/vendor/archive.vue'

export default {
  name: 'App'
  // components: {
  //   'tab-home': home,
  //   'tab-posts': posts,
  //   'tab-archive': archive
  // },
  // data() {
  //   return {
  //     currentKey: 'Home',
  //     currentTab: 'Home',
  //     tabs: ['Home', 'Posts', 'Archive']
  //   }
  // },
  // computed: {
  //   currentTabComponent: function() {
  //     return 'tab-' + this.currentTab.toLowerCase()
  //   },
  //   currentKeyComponent: function() {
  //     return 'key-' + this.currentKey.toLowerCase()
  //   }
  // },
  // methods: {
  //   handleC(tab) {
  //     this.currentKey = tab
  //     this.currentTab = tab
  //   }
  // }
}
</script>

<style scoped lang="scss">

  .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
      }
      .tab-button:hover {
        background: #e0e0e0;
      }
      .tab-button.active {
        background: #e0e0e0;
      }
      .tab {
        border: 1px solid #ccc;
        padding: 10px;
      }
</style>
